<template>
  <van-nav-bar title="编辑用户信息" fixed placeholder />

  <van-uploader :after-read="afterRead" />
  <img :src="img" alt="" />
</template>
<script setup>
import { updateImgAPI } from "@/api/upload";
import { bindUserAvatarAPI } from "@/api/user";
import { ref, onActivated } from "vue";

let img = ref("");

onActivated(() => {
  img.value = "";
});

/*
  1-使用上传文件组件-选择图片，得到file对象
  2-axios调用上传文件接口-得到图片的网址
  3-调用修改头像接口，把图片网址-给到用户头像
*/
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
  // 文件对象--二进制数据对象
  console.log(file.file);

  // 2-axios调用上传文件接口-得到图片的网址
  updateImgAPI(file.file).then(async (r) => {
    console.log(r.data);
    console.log(r.data.fileUrl);
    //返回的是不 网址的 图片地址-
    let imgUrl = import.meta.env.VITE_BASE_URL + r.data.fileUrl;
    // 3-调用修改头像接口，把图片网址-给到用户头像
    let res = await bindUserAvatarAPI(imgUrl);
    console.log(res.data);
    img.value = imgUrl;
  });
};
</script>
<style lang="css" scoped></style>
